<script setup>
import { computed } from "vue"

const props = defineProps({
    column: {
        type: Number,
        default: 2
    },
    descriptionsData: {
        type: Object,
        default: () => { }
    },
    descriptionsProp: {
        type: Array,
        default: () => []
    },
    labelStyle: {
        type: Object,
        default: () => { }
    },
    contentStyle: {
        type: Object,
        default: () => { }
    },
    colon: {
        type: Boolean,
        default: true
    }
})
const labelMargin = computed(() => {
    return { 'marginRight': props.colon ? '0px' : '10px' }
})
</script>

<template>
    <el-descriptions :column="column">
        <el-descriptions-item v-for="(items, index) in descriptionsProp" :key="index" width="0">
            <template #label>
                <span :style="[labelStyle, labelMargin]">{{ colon ? `${items.label}：` : items.label }}</span>
            </template>
            <template #default>
                <span :style="[contentStyle]">{{ items.formater ? items.formater(descriptionsData[items.value]) :
        descriptionsData[items.value] }}</span>
            </template>
        </el-descriptions-item>
    </el-descriptions>
</template>

<style scoped lang="scss"></style>